<template>
	<view>
		<!-- 商品大图 -->
		<view v-if="isShow == true" class="goods-pop-main">
			<view class="goods-pop-box">
				<!-- 顶部遮罩 -->
				<view class="top-bg"></view>
				<image @click="toInfo()" mode="aspectFit" :src="goodsInfo.goodsImg"></image>
				<view @click="toInfo()" class="text-box">
					<view class="title">{{goodsInfo.goodsName}}</view>
					<view class="unit">单位：{{goodsInfo.goodsUnit}}</view>
					<view class="price-box">
						<view class="left">￥{{goodsInfo.salePrice}}</view>
						<view class="right">我想要</view>
					</view>
				</view>
				<!-- 关闭按钮 -->
				<view class="close-box" @click="closeBox()">
					<image mode="aspectFit" :src="imageHosts + 'icon_sp_closs@2x.png'"></image>
				</view>
			</view>
		</view>
		<!-- 商品小图 -->
		<view v-if="isShowSmall == true" @click="toInfo()" class="small-box">
			<image mode="aspectFit" :src="imageHosts + 'icon_sp_gouwucheshou@2x.png'"></image>
			<view class="title">{{goodsInfo.goodsName}}</view>
		</view>
    <app-drainage ref="appDrainage" @setAppIconStyle="setAppIconStyle"></app-drainage>
	</view>
</template>
<script>
import appDrainage from "@/pages/sindex/components/appDrainage.vue";
	export default {
		name:"goods_pop",
    components:{
		  appDrainage
		},
		props:['data'],
		data() {
			return {
				imageHosts: this.image_host + 'mall/',
				isShow:false, // 展示大图
				isShowSmall:false, // 展示小图
				goodsInfo:{},
				videoId:''
			};
		},
		mounted() {
		},
		methods:{
      appDrainageInit()
      {
        this.$refs.appDrainage.getAppTaskConfig();
      },
			// 获取是否有商品信息
			async getGoodsInfo(item) {
			  let postData = {}
			  // item.id = 12609
			  this.videoId = item.id
			  let res = await this.$javaCircle.doRequest("post", "vs/mall/getVideoGoods?videoId="+item.id, postData, '', false)
			  if (res.data.code === 0) {
				  if(res.data.data){
					  this.goodsInfo = res.data.data
					  this.$emit('updateGoodsShow', true)
					  // 判断展示大窗口 还是小窗口
					  if(!this.authDate()){
						  this.isShow = true
						  this.isShowSmall = false
              this.$refs.appDrainage.setStyle((417+370))
					  }else{
						  this.isShow = false
						  this.isShowSmall = true
              this.$refs.appDrainage.setStyle(467)
					  }
				  }else{
					  this.goodsInfo = {}
					  this.$emit('updateGoodsShow', false)
					  this.isShow = false
					  this.isShowSmall = false
            this.$refs.appDrainage.setStyle(427)
				  }
			  }
			},
      setAppIconStyle(){
        if(this.isShow){
          this.$refs.appDrainage.setStyle((417+370))
        }else {
          this.$refs.appDrainage.setStyle(467)
        }
      },
			// 判断大窗口关闭动作是否已过期
			authDate(){
				 // 获取缓存的时间戳
				const timestamp = uni.getStorageSync('goodsTimeKey');
				// 如果时间戳不存在，则缓存已过期
				if (!timestamp) {
					return false;
				}
				// 将时间戳转换为日期对象
				const cachedDate = parseInt(timestamp);
				// 获取当前日期
				const currentDate = new Date().getTime();
				// 设置一天的毫秒数
				const oneDay = 24 * 60 * 60 * 1000;
				// const oneDay = 60 * 1000;
				// 计算两个日期之间的差异（以毫秒为单位）
				const diff = currentDate - cachedDate;
				// 如果差异大于一天的毫秒数，则缓存已过期
				if(diff > oneDay){
					uni.removeStorage('goodsTimeKey')
					return false
				}else{
					return true
				}
			},
			// 关闭弹窗
			closeGoods(){
				this.isShow = false
			},
			// 关闭弹窗  展示小窗
			closeBox(){
				this.isShow = false
				this.isShowSmall = true
				// 存储关闭时间戳
				const timestamp = new Date().getTime();
				uni.setStorageSync('goodsTimeKey',timestamp);
        this.$refs.appDrainage.setStyle((467))
			},
			// 跳转到商品
			toInfo(){
				uni.navigateTo({
					url:'/shop/pages/index/goodsInfo?videoId=' + this.videoId
				})
			}
		}
	}
</script>

<style lang="less" scoped>
   .goods-pop-main{
	   position: fixed;
	   bottom: 417rpx;
	   left: 24rpx;
	   z-index: 12;
	   display: flex;
	   flex-direction: column;
	   justify-content: center;
	   align-items: center;
	   animation: moveAndFadeOut 1s forwards;
   }
   .goods-pop-box{
	   width: 240rpx;
	   height: 370rpx;
	   background: #FFFFFF;
	   box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(0,0,0,0.24);
	   border-radius: 8rpx;
	   border: 2rpx solid #FFFFFF;
	   position: relative;
	   .top-bg{
		   position: absolute;
		   top: 0;
		   left: 0;
		   width: 240rpx;
		   height: 60rpx;
		   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
	   }
	   image{
		  width: 236rpx;
		  height: 223rpx;
	   }
	   .text-box{
		   padding: 0 3rpx 0 5rpx;
	   }
	   .title{
		  width: 232rpx;
		  height: 42rpx;
		  line-height: 42rpx;
		  font-size: 30rpx;
		  font-family: PingFangSC, PingFang SC;
		  font-weight: bold;
		  color: #000000;
		  text-overflow: ellipsis;
		  white-space:nowrap;
		  overflow: hidden;
	   }
	   .unit{
		  height: 30rpx;
		  font-size: 22rpx;
		  font-family: PingFangSC, PingFang SC;
		  font-weight: 400;
		  color: #666666;
		  line-height: 30rpx;
		  margin: 0 0 8rpx 0;
	   }
	   .price-box{
		   width: calc(100%-8rpx);
		   height: 52rpx;
		   background: rgba(250, 59, 84, 0.1);
		   box-shadow: 0rpx 0rpx 14rpx 2rpx rgba(0,0,0,0.24);
		   border-radius: 4rpx;
		   display: flex;
		   justify-content: space-between;
		   .left{
			   height: 52rpx;
			   width: 115rpx;
			   font-size: 32rpx;
			   font-family: PingFangSC, PingFang SC;
			   font-weight: bold;
			   color: #FA3B54;
			   line-height: 52rpx;
		   }
		   .right{
			  border-top-left-radius: 40rpx;
			  width: 115rpx;
			  height: 52rpx;
			  line-height: 52rpx;
			  text-align: center;
			  background: #FA3B54;
			  font-size: 28rpx;
			  color: #FFFFFF;
		   }
	   }
   }
    @keyframes moveAndFadeOut {
       0% {
		 opacity: 0;
       }
       100% {
		 opacity: 1;
       }
     }
   .close-box{
	   position: absolute;
	   top: 10rpx;
	   right: 10rpx;
	   /* background-color: rgba(0, 0, 0, 0.6);
	   padding: 10rpx 10rpx 0 10rpx;
	   border-radius: 10rpx; */
	   image{
		   width: 30upx;
		   height: 30upx;
	   }
	   z-index: 13;
   }
   .small-box{
	   position: fixed;
	   bottom: 417rpx;
	   left: 24rpx;
	   z-index: 12;
	   display: flex;
	   align-items: center;
	   width: 298rpx;
	   height: 60rpx;
	   background-color: rgba(0, 0, 0, 0.6);
	   border-radius: 8rpx;
	   padding: 8rpx;
	   image{
	   		width: 46upx;
	   		height: 46upx;
			padding-right: 10rpx;
	   }
	   .title{
		   width: 224rpx;
		   height: 45rpx;
		   font-weight: 500;
		   font-size: 32rpx;
		   color: #FFFFFF;
		   line-height: 45rpx;
		   text-align: left;
		   white-space: nowrap; /* 防止文本换行 */
		   overflow: hidden; /* 隐藏超出容器宽度的文本 */
		   text-overflow: ellipsis; /* 当文本超出时显示省略号 */
	   }
   }
</style>
